<template>
    <!--    <div>-->
    <draggable class="phone" group="layouts" :list="list"
               handle=".flex-draggalbe-handle">
        <component v-for="(item,index) in list" :key="index" :is="item.componentName" :dataIIndex="index + ''"
                   v-bind="item"></component>

    </draggable>
    <!--    </div>-->
</template>

<script>
  import draggable from 'vuedraggable'
  import {IFlex} from "../BasicComponents";

  export default {
    name: 'PhoneFrame',
    data() {
      return {}
    },
    components: {
      IFlex,
      draggable,
    },
    mounted() {
    },
    computed: {
      list: {
        get() {
          // if (this.$store.state.pattern === 'page')
          //   return this.$store.state.project.checkFile.dragList;
          return this.$store.state.patternComponents.list
        },
        set(value) {
          debugger
          // if (this.$store.state.pattern === 'page') {
          //   this.$store.commit('setCheckFileDragList', value)
          //   return
          // }
          this.$store.commit('setPatternComponentslList', value)
        }
      }
    },
    watch: {
      list: function (newVal, oldVal) {
        console.log('watchNodelist');
        console.log('val', newVal)
      }
    }
  };
</script>

<style lang="stylus" scoped>
    $phoneWidth = 375px;
    $phoneHeight = 667px;
    .phone {
        width: $phoneWidth;
        height: $phoneHeight;
        background-color: white;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        overflow: scroll;
    }
</style>
